import React, {Component, PropTypes} from 'react'
import render from 'react-dom'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {getList, delList, testAjax} from '../../action/home'
import Message from '../../components/confirm'
import Table  from 'antd-mobile/lib/table';
import 'antd-mobile/lib/table/style/index.less'
import Button  from 'antd-mobile/lib/button';
import 'antd-mobile/lib/button/style/index.less'

class home extends Component {

    componentDidMount() {
        this.props.actions.getList({});
    }

    delMenu(data) {
        this.props.actions.delList(data);
    }

    configColumns() {
        return [
            { 
                title: '名字', 
                dataIndex: 'name', 
                key: 'name'
            },
            { 
                title: '品种', 
                dataIndex: 'type', 
                key: 'type'
            },
            { 
                title: '属性', 
                dataIndex: 'class', 
                key: 'class'
            },
            { 
                title: '操作', 
                dataIndex: 'op', 
                key: 'op',
                render: (val,id)=> {
                    return [<Button type="primary" key={id['key']} size="small" onClick = {() => {this.delMenu({Id: id['key']})}}>删除</Button>]
                } 
            },
        ];
    }

    configData() {
        if(Array.from(this.props.getResult)){
            return Array.from(this.props.getResult);
        }
    }

    render() {
        console.log('home props：',this.props)

        return (
            <div>
                <Table
                    columns={this.configColumns()}
                    dataSource={this.configData()}
                />
            </div>
        )
    }
}

const contextTypes = {
    router: PropTypes.object.isRequired,
    store: PropTypes.object.isRequired
}

home.contextTypes = contextTypes;

function mapStateToProps(state) {
  return {
    action_state: state.home.get('action_state'),
    getResult: state.home.get('getResult')
  }
}
//将action的所有方法绑定到props上
function mapDispatchToProps(dispatch) {
  return {
      actions: bindActionCreators({
          getList,
          delList,
          testAjax
      }, dispatch)
  }
}

//通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上
export default connect(mapStateToProps, mapDispatchToProps)(home)



